<template>
    <!-- 所有的汉堡容器 -->
    <div class="meals">
        <!-- 显示商品信息 -->
        <Meal :desc="$attrs.desc" v-for="item in props.meals" :meal="item" :key="item.id"></Meal>
        <h2 v-if="!props.meals || props.meals.length === 0">没有找到指定的商品</h2>
    </div>
</template>
<script setup lang="js">
import Meal from './Meal.vue';
const props = defineProps(["meals"])
</script>

<style lang="css" scoped>
.meals {
    height: calc(100vh-120rem);
    padding-bottom: 140rem;
    overflow: auto;
}

.meals h2 {
    font-size: 40rem;
    text-align: center;
}
</style>
